<template>
  <div class="box" v-for="(item, index) in list" :key="index">{{ index }}</div>
  <button @click="add">操作</button>
  <div v-if="obj.show()">这里是否显示内容</div>
  {{ obj?.required?.() }} {{ obj.c() }}
  <input type="number" v-model="obj.a" />
  <div class="boxP" @click="onSelect">
    这里有
    <span>许多</span>
    文字
  </div>
  <div @click="onSelectNode">
    我想选择点击的位置后面一个字
  </div>

  <div @click="onSelectNodeBeforeAfter">
    我想选择点击的
    <span>
      子节点1开始
      <span>子节点1-1</span>
      子节点1结束
    </span>
    后面一个字
  </div>
</template>
<script>
import moment from 'moment'
import 'moment/locale/zh-cn.js'
export default {
  data() {
    return {
      list: new Array(1).fill(0),
      obj: {
        a: 1,
        show: () => {
          return this.obj.a == 1
        },
        required: () => {
          return this.obj.a == 1
        },
        c: () => {
          if (this.obj.required) {
            return this.obj.required()
          } else {
            return true
          }
        }
      }
    }
  },
  methods: {
    add(e) {
      e.target.classList = ['abc']
      let dom = document.querySelectorAll('.abc')
      console.log(dom)
      console.log(`helloworld`)
      console.log(e)

      function selectText(node) {
        if (window.getSelection && document.createRange) {
          var selection = window.getSelection()
          var range = document.createRange()
          range.selectNodeContents(node)
          selection.removeAllRanges()
          selection.addRange(range)
        } else if (document.body.createTextRange) {
          // 支持 IE < 9
          var textRange = document.body.createTextRange()
          textRange.moveToElementText(node)
          textRange.select()
        }
      }

      let node = document.querySelector('.boxP')
      selectText(node)
    },
    onSelectNode(e) {
      var selection = window.getSelection()
      var range = document.createRange()
      let anchorNode = selection.anchorNode
      range.selectNodeContents(anchorNode)
      console.log(range)

      let anchorOffset = selection.anchorOffset

      range.setStart(anchorNode, anchorOffset)
      range.setEnd(anchorNode, anchorOffset + 1)
      selection.removeAllRanges()
      selection.addRange(range)
      console.log(selection)
    },
    onSelect(e) {
      console.log(e.target)
      this.selectText(e.target)
    },
    onSelectNodeBeforeAfter(e) {
      let selection = window.getSelection()
      let range = document.createRange()
      let { anchorNode } = selection
      //因为是元素节点，这个就是选中节点了
      range.setStartBefore(anchorNode)
      range.setEndAfter(anchorNode)
      selection.removeAllRanges()
      selection.addRange(range)
      console.log(selection)
    },
    selectText(node) {
      if (window.getSelection && document.createRange) {
        var selection = window.getSelection()
        var range = document.createRange()
        range.selectNodeContents(node)
        selection.removeAllRanges()
        selection.addRange(range)
      } else if (document.body.createTextRange) {
        // 支持 IE < 9
        var textRange = document.body.createTextRange()
        textRange.moveToElementText(node)
        textRange.select()
      }
    },
    moblink(e) {}
  },
  mounted() {
    //console.log(moment)
    moment.updateLocale('zh-cn', {
      relativeTime: {
        future: '%s后',
        past: '%s前',
        s: '几秒',
        ss: '%d秒',
        m: '1分钟',
        mm: '%d分钟',
        h: '1小时',
        hh: '%d小时',
        d: '1天',
        dd: '%d天',
        w: '1周',
        ww: '%d周',
        M: '1个月',
        MM: '%d个月',
        y: '1年',
        yy: '%d年'
        /*y(number, withoutSuffix, key, isFuture) {*/
        /*console.log(number, withoutSuffix, key, isFuture)*/
        /*return '1'*/
        /*},*/
        /*yy(number, withoutSuffix, key, isFuture) {*/
        /*return '1'*/
        /*}*/
      }
    })
    let n1 = moment([2024, 3, 17])
    //判断时间差大于1年的则显示时间
    //let n1 = moment()
    let str = n1.fromNow()
    if (str.indexOf('年') > -1) {
      str = n1.format('YYYY-MM-DD')
    }
    console.log(str)
    this.list.forEach((res) => {
      this.moblink(res)
    })
  }
}
</script>
<style type="text/css">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
</style>
